<template>
  <div class="content-right-header">
    <div class="content-right-header-info">
      <div
        :class="{
          'right-header-item': curNotifyChild !== notifyUnread,
          'right-header-item-select': curNotifyChild === notifyUnread,
        }"
        @click="handleSwitchChild(notifyUnread)"
      >
        未读(<span>{{ unreadCount }}</span
        >)
      </div>
      <div
        :class="{
          'right-header-item': curNotifyChild !== notifyRead,
          'right-header-item-select': curNotifyChild === notifyRead,
        }"
        @click="handleSwitchChild(notifyRead)"
      >
        已读
      </div>
      <div
        :class="{
          'right-header-item': curNotifyChild !== notifyAll,
          'right-header-item-select': curNotifyChild === notifyAll,
        }"
        @click="handleSwitchChild(notifyAll)"
      >
        全部
      </div>
    </div>
    <div
      v-show="curNotifyChild === notifyUnread && unreadCount != 0"
      class="content-right-header-handle"
      @click="handleAllStatus"
    >
      全部设为已读
    </div>
  </div>
  <div v-if="curNotifyChild === notifyUnread">
    <notify-item
      :handle-all-read="handleAllRead"
      :read-status="unreadStatus"
      :msg-type="msgType"
      @unreadCount="changeUnreadCount"
    />
  </div>
  <div v-if="curNotifyChild === notifyRead">
    <notify-item :handle-all-read="handleAllRead" :read-status="readStatus" :msg-type="msgType" />
  </div>
  <div v-if="curNotifyChild === notifyAll">
    <notify-item
      :handle-all-read="handleAllRead"
      :read-status="allStatus"
      :msg-type="msgType"
      @unreadCount="changeUnreadCount"
    />
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
  import NotifyItem from '@/views/board-home/components/notify-item.vue';
  import VueEvent from '@/helper/event';
  import { getCurrentUser } from '@jecloud/utils';
  import {
    HOME_NOTIDY_UNREAD,
    HOME_NOTIDY_READ,
    HOME_NOTIDY_ALL,
    HOME_NOTIFY_UNREAD_COUNT,
    HOME_NOTIFY_SWITCH_TYPE,
  } from '@/helper/constant';
  import { UpdateAllReadStatus } from '@/api';
  export default defineComponent({
    name: 'NotifyInfo',
    components: {
      NotifyItem,
    },
    setup() {
      const state = reactive({
        curNotifyChild: HOME_NOTIDY_UNREAD, //当前通知
        notifyUnread: HOME_NOTIDY_UNREAD, //未读
        notifyRead: HOME_NOTIDY_READ, //已读
        notifyAll: HOME_NOTIDY_ALL, //全部
        unreadCount: 0, //未读数量
        updateAllFlag: true, //更改
        handleAllRead: false, //是否操作过全部已读
        unreadStatus: '0', //未读
        readStatus: '1', //已读
        allStatus: '', //全部
        msgType: '', //通知分类
      });
      const methods = {
        handleSwitchChild(childType) {
          //切换流程下的类型
          state.curNotifyChild = childType;
        },
        changeUnreadCount(count) {
          //监听未读数量变化
          state.unreadCount = count;
          VueEvent.emit(HOME_NOTIFY_UNREAD_COUNT, count);
        },
        handleAllStatus() {
          //全部已读
          if (state.updateAllFlag) {
            state.updateAllFlag = false;
            const param = {
              userId: getCurrentUser()?.id,
              deptId: getCurrentUser()?.organization.id, //部门id
            };
            UpdateAllReadStatus(param).then((res) => {
              if (res.code == 1000 && res.success) {
                state.handleAllRead = true;
                state.updateAllFlag = true;
              }
            });
          }
        },
        changeType(typeCode) {
          //监听通知分类变化
          state.msgType = typeCode;
        },
      };
      onMounted(() => {
        VueEvent.on(HOME_NOTIFY_SWITCH_TYPE, methods.changeType);
      });
      onBeforeUnmount(() => {
        VueEvent.off(HOME_NOTIFY_SWITCH_TYPE);
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .content-right-header {
    width: 100%;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    .content-right-header-info {
      display: inline-flex;
      align-items: center;
    }
    .right-header-item {
      font-size: 14px;
      color: #8d98ab;
      margin-right: 20px;
      cursor: pointer;
    }
    .right-header-item:hover {
      color: @primary-color;
    }
    .right-header-item-select {
      padding: 6px 8px;
      background-color: @je-menu-item-active-bg;
      border: 1px solid @je-menu-item-active-bg;
      border-radius: 8px;
      margin-right: 20px;
      color: @primary-color;
    }
    .finish-status-box {
      width: 84px;
      height: 26px;
      line-height: 26px;
      display: inline-flex;
      align-items: center;
      .finish-status-item {
        width: 42px;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        border-top: 1px solid #8d98ab;
        border-bottom: 1px solid #8d98ab;
        color: #8d98ab;
        cursor: pointer;
      }
      .status-item-left {
        border-left: 1px solid #8d98ab;
        border-radius: 8px 0 0 8px;
      }
      .status-item-right {
        border-right: 1px solid #8d98ab;
        border-radius: 0 8px 8px 0;
      }
      .status-item-left-select {
        border-right: 1px solid #3265f5;
      }
      .status-item-right-select {
        border-left: 1px solid #3265f5;
      }
      .status-item-select {
        border-color: #3265f5;
        color: #3265f5;
      }
    }
    .content-right-header-handle {
      color: #3265f5;
      cursor: pointer;
    }
  }
</style>
